<template>
	<view class="overlay" v-if="popShow">
		<view class="bg-white pop-cont">
			<view class="flex padding u-border-bottom">
				<image class="poster margin-right" :src="popData.img" mode="aspectFill"></image>
				<view class="">
					<view class="">
						{{popData.name}}
					</view>
					{{popData.french}}
					<view class="text-price">
						{{popData.list[dropIdx].price}}
					</view>
					<view>
						<text class="iconfont icon-canju"></text>
						{{popData.list[dropIdx].fittings}}
					</view>
				</view>
			</view>
			<view class="flex justify-between padding u-border-bottom">
				<text>规格选择</text>
				<view class="spec-cont" @click="dropShow=true">
					{{popData.list[dropIdx].spec}}
					({{popData.list[dropIdx].weight}})
					-
					{{popData.list[dropIdx].edible}}
					<text class="iconfont icon-xiala"></text>
					<view v-if="dropShow" class="spec-list bg-white shadow">
						<view 
							class="padding-sm" 
							v-for="(item,index) in popData.list"
							@click.stop="handleDrop(index)"
						>
							{{item.spec}}
							({{item.weight}})
							-
							{{item.edible}}
						</view>
					</view>
				</view>
			</view>
			<view class="flex justify-between padding">
				<text>数量选择</text>
				<uni-number-box :min="1" :max="100" v-model="num" buttonSize="20"/>
			</view>
			<view class="flex btn-cont">
				<view class="bg-grey padding" @click="handleClose">
					取消
				</view>
				<view class="bg-yellow padding" @click="handleAdd">
					确认
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState}  from 'vuex'
import { pushScopeId } from "vue";
	export default {
		name:"good-spec",
		data() {
			return {
				show:true,
				dropIdx:0, //标志用户选中的规格下标
				dropShow:false,  //控制下拉菜单显示
				num:1
			}
		},
		computed:{
			...mapState({
				popShow:state=>state.cart.popShow,
				popData:state=>state.cart.popData
			})
		},
		watch:{
			popData(){  //初始化编辑弹窗默认选中的规格
				console.log('弹窗popData变了');
				let {dropIdx,num} = this.popData
				if(dropIdx){
					this.dropIdx = dropIdx //在购物车中的弹窗显示正确
					this.num = num
					return
				}
				//保证多次点击购物车按钮后，弹窗能够保持正确显示
				this.dropIdx = 0  
				this.dropShow = false
				this.num = 1
			}
		},
		methods: {
			handleAdd() {
				this.$store.commit('cart/cartPopShowMut',false)
				let {num,dropIdx} = this
				this.$store.commit('cart/cartAddMut',{ //整合商品数据，添加至购物车
					...this.popData,
					num,dropIdx
				})
			},
			handleDrop(idx){
				this.dropShow = false
				this.dropIdx = idx
			},
			handleClose(){
				this.$store.commit('cart/cartPopShowMut',false)
			}
		},
	}
</script>

<style lang="scss">
.overlay{
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100%;
	background-color: rgba(0,0,0,0.4);
	z-index: 10;
}
.pop-cont{
	position: absolute;
	top: 50%;
	left: 3%;
	width: 94%;
	box-sizing: border-box;
	transform: translateY(-50%);
}
.poster{
	height: 160upx;
	width: 160upx;
}
.btn-cont{
	view{
		width: 50%;
		text-align: center;
	}
}
.spec-cont{
	position: relative;
	.spec-list{
		position: absolute;
		right: 0;
		top: 70upx;
		z-index: 2;
		width: 400upx;
	}
}
.shadow{
	box-shadow: 0 0 20upx 2upx rgba(0,0,0,0.4);
}
</style>
